  <template>
        <el-card>
            <template #header>
              <div class="card-header">
                <el-row>
                  <el-col :span="5"><el-icon :size="25" color="#5470C6"><User /></el-icon><div>学员数量：{{data.student}}</div></el-col>
                  <el-col :span="5"><el-icon :size="25" color="#5470C6"><Reading /></el-icon><div>课程数量：{{data.course}}</div></el-col>
                  <el-col :span="4"><el-icon :size="25" color="#5470C6"><SetUp /></el-icon><div>班期数量：{{data.class}}</div></el-col>
                  <el-col :span="5"><el-icon :size="25" color="#5470C6"><VideoCamera /></el-icon><div>今日直播：{{data.article}}</div></el-col>
                  <el-col :span="5"><el-icon :size="25" color="#5470C6"><Document /></el-icon><div>文章数量：{{data.live}}</div></el-col>
                </el-row>  
              </div>
            </template>
            <el-row class="homebox">
              <el-col :span="12"><echa></echa></el-col>
              <el-col :span="12"><echa2></echa2></el-col>
            </el-row> 
            <template #footer></template>
            

    </el-card>    
  </template>

  <script setup>  
    import { ref, onMounted, watch ,onActivated} from 'vue';  
    import { getArticleList } from '@/apis/article';  
    import { decryptAES } from '@/utils/jiemi';
    import { getStudentList } from '@/apis/student';
    import { getClassList } from '@/apis/class'
    import { getCourse } from '@/apis/course'
    import { getLiveList } from '@/apis/live'
    import  echa  from './components/echa.vue'
    import echa2 from './components/echa2.vue'
    import * as echarts from 'echarts';
    const queryParams = ref({  
      pageSize: 1,  
      currentPage: 1  
    });  
    
    const data = ref({
      article: 0,
      student: 0,
      class: 0,
      course: 0,
      live:0
    });

    onActivated(()=>{
      getArticles();
    })

    const getArticles = async () => {  

      const response = await getArticleList(queryParams.value);      
      data.value.article = response.data.total;

      data.value.student = JSON.parse(decryptAES((await getStudentList()).data,'123456')).total;

      
      const classResponse = await getClassList();        
      data.value.class = classResponse.data.total; 

      const courseResponse = await getCourse();        
      data.value.course = courseResponse.data.total;

      const liveResponse = await getLiveList();        
      data.value.live = liveResponse.data.total; 
    };  
  </script>

  <style lang="scss">
    .card-header {
        text-align:center;
        font-weight: 800;
    }

    
  </style>